 <link rel="stylesheet" href="/static/Admin/css/fileinput.min.css">
 <script src="/static/Admin/js/fileinput.min.js"></script>
 <script src="/static/Admin/js/zh.js"></script>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ntModalLabel" type="{$type}">{$title}</h4>
    </div>
    <div class="modal-body">
            <div class="row clearfix">
                    <div class="col-md-12 column">
                        <div class="alert alert-dismissable alert-info">
                            <button type="button" class="close">×</button>
                            <p></p>
                        </div>
                    </div>
                </div>
        <table class="table table-striped" style="padding-top:0">
            <tbody>
                {if isset($brandList)}
                    <tr >
                        <td>{:strtoupper(lang("brand_name"))}<span class="required"></span></td>
                        <td><input type="text" class="form-control brandname" placeholder="{:lang('brand_name')}" value="{$brandList.name}" data-id="{$brandList.id}"></td>
                    </tr>
                    <tr >
                        <td>{:strtoupper(lang("brand_icon"))}<span class="required"></span></td>
                        <td><img src="{$brandList.img_path}" id="old_img_path" border="0" width="50px" height="50px"></td>
                    </tr>
                    <tr class="resbox">
                        <td>{:strtoupper(lang("icon_file"))}<span class="required"></span></td>
                        <td>
                            <input id="input-id" name="file" multiple type="file" data-show-caption="true">
                        </td>
                    </tr>
                {else /}
                    <tr >
                        <td>{:strtoupper(lang("brand_name"))}<span class="required"></span></td>
                        <td><input type="text" class="form-control brandname" placeholder="{:lang('brand_name')}" value="" data-id=""></td>
                    </tr>
                    <tr class="resbox">
                        <td>{:strtoupper(lang("icon_file"))}<span class="required"></span></td>
                        <td>
                          <input id="input-id" name="file" type="file" data-show-caption="true">
                        </td>
                    </tr>
                {/if}
            </tbody>
        </table>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:strtoupper(lang('cancel'))}</button>
        <button type="button" class="btn btn-primary save"  style="padding-left:24px;padding-right:24px"><span class="glyphicon glyphicon-floppy-disk"></span>{:strtoupper(lang('save'))}</button>
    </div>
    <script>

 $(function () {
     initFileInput("input-id");
 })
 var urldata={}
 function initFileInput(ctrlName) {
     var control = $('#' + ctrlName);
     control.fileinput({
         language: 'zh', //设置语言
         uploadUrl: "/admin/probrand/brandAdd?request=uploads", //上传的地址
         allowedFileExtensions: ['jpg', 'gif', 'png','exe'],//接收的文件后缀
         //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
         uploadAsync: true, //默认异步上传
         showUpload: true, //是否显示上传按钮
         showRemove : true, //显示移除按钮
         showPreview : true, //是否显示预览
         showCaption: false,//是否显示标题
         browseClass: "btn btn-primary", //按钮样式
         dropZoneEnabled: false,//是否显示拖拽区域
         //minImageWidth: 50, //图片的最小宽度
         //minImageHeight: 50,//图片的最小高度
         //maxImageWidth: 1000,//图片的最大宽度
         //maxImageHeight: 1000,//图片的最大高度
         //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
         minFileCount: 1,
         //maxFileCount: 10, //表示允许同时上传的最大文件个数
         enctype: 'multipart/form-data',
         validateInitialCount:true,
         previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
         msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
         layoutTemplates :{
              //actionDelete:'', //去除上传预览的缩略图中的删除图标
             //actionUpload:'',//去除上传预览缩略图中的上传图片；
             //actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
         },
     }).on('filepreupload', function(event, data, previewId, index) {     //上传中
         var form = data.form, files = data.files, extra = data.extra,
         response = data.response, reader = data.reader;
     }).on("fileuploaded", function (event, data, previewId, index) {
         data=JSON.parse(data.response)
         if(data.status==1){
            urldata=data
            //toastr.info(data.msg)
            change_mes_type('.alert',data.status)
            $('.alert p').html('*'+data.msg+'<br>')
         }else{
            //toastr.warning(data.msg);
            change_mes_type('.modal-body .alert',data.status)
            $('.modal-body .alert p').html('*'+data.msg+'<br>')
         }
     }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
     })
 }
 $('.save').click(function(){
    if($("#ntModalLabel").attr('type') == 'edit'){
        var url = '/admin/probrand/brandEdit?request=update';
    }else{
        var url = '/admin/probrand/brandAdd?request=insert';
    }

    $.ajax({
        url:url,
        type:'post',
        data:{
            name:$('.brandname').val(),
            img_path:urldata.filepath,
            // img_path:123,
            old_img_path:$('#old_img_path').attr('src'),
            id:$('.brandname').attr('data-id')
        },
        dataType: "json",
        success: function (result) {
            result = JSON.parse(result)
            if(result.status==1){
                change_mes_type('.alert',result.status)
                $('.alert').show()
                $('.alert p').html('*'+result.msg+'<br>')
                $('#brand_editModal').modal('hide')
            }else{
                change_mes_type('.modal-body .alert',result.status)
                $('.modal-body .alert').show()
                $('.modal-body .alert p').html('*'+result.msg+'<br>')
                //toastr.warning(result.msg);
            }
        }
    })

 })
</script>